<template>
  <div class="bodyDiv">
    <manangeDiv
      :componentMap="innerComponentArray"
      :pageNumber="page_numeber"
      :size="page_size"
      :total="total"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    />
    <bodyBg />
    <topBg />
    <div
      v-for="(item, index) in leftComponents"
      :key="index"
      :style="'position: relative;' + item.containerStyle"
    >
      <div class="chartStyle">
        <div :style="item.chartStyle">
          <component :is="item.comp" />
        </div>
      </div>
      <div class="chartBgStyle">
        <component :is="item.componentBg" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import manangeDiv from "./visualization/manangeDiv.vue";
import topBg from "./visualization/bodyBg/topBg.vue";
import bodyBg from "./visualization/bodyBg/bgDiv.vue";
import { initDB, refreshItems, getItemsByPage } from "../utils/indexedDbUtils";

let create_component_map = ref<any[]>([]);

let leftComponents = ref<any[]>([]);
let componentArrayLeft = ref([]);
let componentMapLeft = ref([]);

// 将数组转换为InnerComponentMap格式
function createComponentMap(components: Array<any>) {
  let newList = components.map((comp) => ({
    index: comp.zj.index,
    name: comp.zj.name,
    componentBg: () => import(/* @vite-ignore */ comp.zj.bgPath),
    component: () => import(/* @vite-ignore */ comp.zj.path),
    containerStyle: comp.zj.containerStyle,
    chartStyle: comp.zj.chartStyle,
    position: comp.zj.position,
  }));

  return newList;
}

// 修改loadComponent函数
async function loadComponent(componentName: string, position: string) {
  try {
    let component = componentMapLeft.value.find((c) => c.name === componentName);
    if (component) {
      const index = component.index;
      const item = await component.component();
      const itemBg = await component.componentBg();
      const containerStyle = component.containerStyle;
      const chartStyle = component.chartStyle;
      const position = component.position;
      return {
        index,
        comp: item.default,
        componentBg: itemBg.default,
        containerStyle,
        chartStyle,
        position,
      };
    }
    throw new Error(`Component ${componentName} not found`);
  } catch (error) {
    console.error(`加载组件 ${componentName} 失败:`, error);
    return null;
  }
}

//添加组件到左侧区域
async function addComponentLeft(componentName: string) {
  const item = await loadComponent(componentName, "left");
  if (item) {
    leftComponents.value.push(item);
  }
}

let innerComponentArray = reactive([]);
let page_numeber = ref(1);
let page_size = ref(4);
let total = ref(0);

const load_check_store = async () => {
  let arr_store = [];
  // console.log("获取到的数据:", data);

  let pageRes = await getItemsByPage(
    "CheckStore",
    page_numeber.value,
    page_size.value
  );
  // console.log("分页结果:", pageRes); // 添加日志
  let data = pageRes.data;
  total.value = pageRes.total;
  for (var i = 0; i < data.length; i++) {
    arr_store.push({ zj: data[i] });
  }
  innerComponentArray.splice(0);
  innerComponentArray.push(...arr_store);
  // console.log('innerComponentArray.value',innerComponentArray.value);
};

const sizeChange = (val: number) => {
  page_size.value = val;
  load_check_store();
};
const pageChange = (val: number) => {
  console.log("pageChange", val);
  page_numeber.value = val;
  load_check_store();
};

onMounted(async () => {
  // 初始化数据库
  initDB();
  //控制面板的chart图表数据加载
  await load_check_store();

  refreshItems("MyStore", (data) => {
    console.log("获取到的数据:", data);
    let arr_left_store = [];
    for (var i = 0; i < data.length; i++) {
      arr_left_store.push({ zj: data[i] });
    }
    componentArrayLeft.value.push(...arr_left_store);
    // console.log("componentArrayLeft", componentArrayLeft);
  });

  // setTimeout(() => {
  //   let arr = [
  //     {
  //       zj: {
  //         index: 1,
  //         name: "view1",
  //         path: "./visualization/view1.vue", // Fixed path
  //         bgPath: "./visualization/bg/view1_a.vue", // Fixed path
  //         containerStyle: "height:350px;width:100%;overflow:hidden;",
  //         chartStyle: "width: 90%; height: 80%;margin-top:-30px;",
  //       },
  //     },
  //     {
  //       zj: {
  //         index: 3,
  //         name: "view3",
  //         path: "./visualization/view3.vue", // Fixed path
  //         bgPath: "./visualization/bg/view3_a.vue", // Fixed path
  //         containerStyle: "height:350px;width:100%;overflow:hidden;margin-top:-50px;",
  //         chartStyle: "width: 80%; height: 55%;margin-top:-30px;",
  //       },
  //     },
  //   ];
  //   componentArray.value.push(...arr);
  // }, 2000);

  // let arr = [
  //   {
  //     zj: {
  //       index: 1,
  //       name: "view1",
  //       path: "./view1.vue", // Fixed path
  //       bgPath: "./bg/view1.vue", // Fixed path
  //       containerStyle: "height:350px;width:calc(50% - 30px)",
  //       chartStyle: "width: 100%; height: 100%;margin-left:30px;",
  //     },
  //   },
  //   {
  //     zj: {
  //       index: 2,
  //       name: "view2",
  //       path: "./view2.vue", // Fixed path
  //       bgPath: "./bg/view2.vue", // Fixed path
  //       containerStyle: "height:350px;width:calc(50% - 30px)",
  //       chartStyle: "width: 80%; height: 80%;margin-left:80px;",
  //     },
  //   },
  //   {
  //     zj: {
  //       index: 3,
  //       name: "view3",
  //       path: "./view3.vue",
  //       bgPath: "./bg/view3.vue",
  //       containerStyle: "height:350px;width:calc(50% - 30px)",
  //       chartStyle: "width: 80%; height:70%;",
  //     },
  //   },
  //   {
  //     zj: {
  //       index: 4,
  //       name: "view4",
  //       path: "./view4.vue",
  //       bgPath: "./bg/view4.vue",
  //       containerStyle: "height:350px;width:calc(50% - 30px)",
  //       chartStyle: "width: 80%; height: 80%;margin-left:80px;",
  //     },
  //   },
  // ];
  // setTimeout(()=>{
  //   innerComponentArray.value.push(...arr);
  // },2000)
});
watch(
  componentArrayLeft.value,
  async (newVal) => {
    componentMapLeft.value = createComponentMap(newVal);
    componentMapLeft.value = componentMapLeft.value.sort(
      (a, b) => a.index - b.index
    );
    for (const component of componentMapLeft.value) {
      await addComponentLeft(component.name);
    }
  },
  { immediate: true }
);

</script>
<style scoped>
.chartStyle {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chartBgStyle {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.itemCenter {
  width: 40%;
  /* border:  1px solid #ccc; */
}
.itemLeftOrRight {
  width: 30%;
  height: 100%;
}
/* 为每个动态组件添加自动高度分配 */

.bodyDiv {
  position: relative;
  width: 100%;
  height: calc(100vh + 110px);
  display: flex;
  flex-wrap: nowrap;
  z-index: 1;
  overflow: hidden;
}
.bgDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>
<style>
body {
  width: 100%;
  height: 100%;
}
</style>
